<template>
  <div class="content-data-wrapper">
    <div class="title">
      <h2>内容数据</h2>
    </div>

    <span></span>

    <div class="article-chart-wrapper">
      <echart-line ref="articleChart"></echart-line>
    </div>

    <div class="source-chart-wrapper">
      <echart-line ref="sourceChart"></echart-line>
    </div>
  </div>
</template>

<script>
import EchartLine from '@c/utils/EchartLine.vue';

  export default {
    data() {
      return {
        articleData: {
          read: [],
          like: [],
          comment: [],
          collect: [],
        },
        sourceData: {
          download: [],
          like: [],
          comment: [],
          collect: []
        },
        dateNum: 7,
      }
    },
    components: {
      EchartLine,
    },
    methods: {
      fetchArticleData() {
        let promiseList = new Array(4);

        promiseList[0] = new Promise((resolve, reject) => {
          this.$fetch({
            name: 'article data read',
            url: '/creator/data/article/read',
            method: 'GET'
          }).then(res => {
            if(res.data.success) {
              this.articleData.read = res.data.object;
              resolve();
            } else {
              this.$alert({
                type: 'error',
                content: '获取文章阅读数失败'
              })
              reject();
            }
          }).catch(error => {
              this.$alert({
                type: 'error',
                content: '获取文章阅读数失败'
              })
            reject(error)
          });
        })
        
        promiseList[1] = new Promise((resolve, reject) => {
          this.$fetch({
            name: 'article data like',
            url: '/creator/data/article/like',
            method: 'GET'
          }).then(res => {
            if(res.data.success) {
              this.articleData.like = res.data.object;
              resolve()
            } else {
              this.$alert({
                type: 'error',
                content: '获取文章点赞数失败'
              })
              reject(res.data.message);
            }
          }).catch(error => {
              this.$alert({
                type: 'error',
                content: '获取文章点赞数失败'
              })
            reject(error);
          })
        })
        
        promiseList[2] = new Promise((resolve, reject) => {
          this.$fetch({
            name: 'article data collect',
            url: '/creator/data/article/collect',
            method: 'GET'
          }).then(res => {
            if(res.data.success) {
              this.articleData.collect = res.data.object;
              resolve()
            } else {
              this.$alert({
                type: 'error',
                content: '获取文章收藏数失败'
              })
              reject(res.data.message);
            }
          }).catch(error => {
              this.$alert({
                type: 'error',
                content: '获取文章收藏数失败'
              })
            reject(error);
          })
        })
        
        promiseList[3] = new Promise((resolve, reject) => {
          this.$fetch({
            name: 'article data comment',
            url: '/creator/data/article/comment',
            method: 'GET'
          }).then(res => {
            if(res.data.success) {
              this.articleData.comment = res.data.object;
              resolve()
            } else {
              this.$alert({
                type: 'error',
                content: '获取文章评论数失败'
              })
              reject();
            }
          }).catch(error => {
              this.$alert({
                type: 'error',
                content: '获取文章评论数失败'
              })
            reject(error);
          })
        })

        Promise.all(promiseList).then(() => {
          this.initArticleChart();
        })
      },
      fetchSourceData() {
        let promiseList = new Array(4);

        promiseList[0] = new Promise((resolve, reject) => {
          this.$fetch({
            name: 'source data download',
            url: '/creator/data/source/download',
            method: 'GET'
          }).then(res => {
            if(res.data.success) {
              this.sourceData.download = res.data.object;
              resolve();
            } else {
              this.$alert({
                type: 'error',
                content: '获取资源下载数失败'
              })
              reject();
            }
          }).catch(error => {
              this.$alert({
                type: 'error',
                content: '获取资源下载数失败'
              })
            reject(error);
          })
        })

        promiseList[1] = new Promise((resolve, reject) => {
          this.$fetch({
            name: 'source data like',
            url: '/creator/data/source/like',
            method: 'GET'
          }).then(res => {
            if(res.data.success) {
              this.sourceData.like = res.data.object;
              resolve()
            } else {
              this.$alert({
                type: 'error',
                content: '获取资源点赞数失败'
              });
              reject();
            }
          }).catch(error => {
              this.$alert({
                type: 'error',
                content: '获取资源点赞数失败'
              });
            reject(error);
          })
        })
        
        promiseList[2] = new Promise((resolve, reject) => [
          this.$fetch({
            name: 'source data collect',
            url: '/creator/data/source/collect',
            method: 'GET'
          }).then(res => {
            if(res.data.success) {
              this.sourceData.collect = res.data.object;
              resolve();
            } else {
              this.$alert({
                type: 'error',
                content: '获取资源收藏数失败'
              });
              reject();
            }
          }).catch(error => {
              this.$alert({
                type: 'error',
                content: '获取资源收藏数失败'
              });
            reject(error);
          })
        ])
        
        promiseList[3] = new Promise((resolve, reject) => {
          this.$fetch({
            name: 'source data comment',
            url: '/creator/data/source/comment',
            method: 'GET'
          }).then(res => {
            if(res.data.success) {
              this.sourceData.comment = res.data.object;
              resolve();
            } else {
              this.$alert({
                type: 'error',
                content: '获取资源评论数失败'
              });
              reject();
            }
          }).catch(error => {
              this.$alert({
                type: 'error',
                content: '获取资源评论数失败'
              });
            reject(error);
          })
        })

        Promise.all(promiseList).then(() => {
          this.initSourceChart();
        })
      },
      initArticleChart() {
        let dates = this.$dateUtils.getRecentDate(this.dateNum);
        let formatDates = dates.map(d => {
          return this.$dateUtils.format(d, "yyyy-MM-dd")
        })
        this.$refs.articleChart.init('文章数据', formatDates, [
          {
            name: '阅读数',
            data: this.articleData.read.slice(-1 * this.dateNum)
          },
          {
            name: '点赞数',
            data: this.articleData.like.slice(-1 * this.dateNum)
          },
          {
            name: '评论数',
            data: this.articleData.comment.slice(-1 * this.dateNum)
          },
          {
            name: '收藏数',
            data: this.articleData.collect.slice(-1 * this.dateNum)
          },
        ]);
      },
      initSourceChart() {
        let dates = this.$dateUtils.getRecentDate(7);
        let formatDates = dates.map(d => {
          return this.$dateUtils.format(d, "yyyy-MM-dd")
        })
        this.$refs.sourceChart.init('资源数据', formatDates, [
          {
            name: '下载数',
            data: this.sourceData.download.slice(-1 * this.dateNum)
          },
          {
            name: '点赞数',
            data: this.sourceData.like.slice(-1 * this.dateNum)
          },
          {
            name: '评论数',
            data: this.sourceData.comment.slice(-1 * this.dateNum)
          },
          {
            name: '收藏数',
            data: this.sourceData.collect.slice(-1 * this.dateNum)
          },
        ]);
      }
    },
    mounted () {
      this.fetchArticleData();
      this.fetchSourceData();
    },
  }
</script>

<style lang="less" scoped>
@w: var(--w);
@fs: calc(@w * 0.01);

.content-data-wrapper {
  box-sizing: border-box;
  width: @w;

  .title {
    --th: calc(@w * 0.06);
    --fs: calc(var(--th) * 0.4);
    box-sizing: border-box;
    width: @w;
    height: var(--th);
    line-height: var(--th);
    font-size: var(--fs);
    text-indent: var(--fs);
  }

  span {
    display: block;
    width: @w;
    height: 1px;
    background-color: var(--gray);
  }

  .article-chart-wrapper,
  .source-chart-wrapper {
    box-sizing: border-box;
    padding: 2% 5%;

    height: calc(@w * 0.7);
  }
}
</style>